/**
  * vant全局样式 
**/
:root:root {
  --van-primary-color: #000;
  --van-button-round-radius: var(--van-radius-md);
  --van-button-primary-border-color: var(--van-primary-color);
  --van-cell-horizontal-padding: var(--van-padding-xs);
  --van-dialog-message-font-size: var(--font-size-large);
  --van-cell-group-inset-padding: 0 var(--van-padding-sm);
  --van-tabs-line-height: 46px;
}
.van-button--round {
  border-radius: var(--van-button-round-radius);
}
.van-button--primary {
  background: var(--van-button-primary-background);
}
.van-cell {
  padding: var(--van-cell-horizontal-padding);
  align-items: center;
}
:root {
  --star-search-padding: 10px;
  --star-search-background: #fff;
  --star-search-content-background: #f7f8fa;
}
:root {
  --font-size-small: 12px;
  --font-size-medium: 14px;
  --font-size-large: 18px;
  --font-size-big: 20px;
  --gray-background: #eff2f5;
  --gray-color: #888;
  --border-radius: 10px;
  --box-background: #fff;
  --box-margin: 0 10px 10px;
  --transition-duration: 0.3s;
  --red-text: #ff0000;
  --btn-background: #ff0000;
  --btn-color: #fff;
  --box-radius: 10px;
  --btn-padding: 5px;
  --text-weight: 600;
  --nav-bar-height: 46px;
}
img {
  border-radius: var(--border-radius);
}
#app {
  height: 100vh;
  width: 100vw;
}
button {
  color: var(--btn-color);
  font-size: var(--font-size-small);
  padding: var(--btn-padding);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  display: inline-block;
  transition: background-color var(--transition-duration) ease;
}
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--gray-background);
}
.box {
  background: var(--box-background);
  border-radius: var(--box-radius);
  margin: var(--box-margin);
  transition: var(--transition-duration) all;
}
.title {
  font-size: 16px;
  font-weight: var(--text-weight);
}
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.select-btn,
.add-cart,
.add-btn {
  @extend button;
  background: var(--btn-background);
}
.add-btn {
  border-radius: 50%;
}
.load-complete {
  margin: 10px 0;
  font-size: var(--font-size-small);
  color: var(--gray-color);
}
/**
  * 图片懒加载全局样式
**/
.lazyload-img[src$='loading.png'] {
  /* 这里可以设置加载中图片的样式，例如宽度、高度、边框、圆角等 */
  width: 40px;
  height: 40px;
  /* 应用动画 */
  animation: rotate 2s linear infinite;
}

.lazyload-img[src$='error.png'] {
  /* 针对加载失败图片的样式设置 */
  width: 40px;
  height: 40px;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
// 导航栏
.star-nav-bar {
  min-height: var(--nav-bar-height);
}
